import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import QueueAnim, { IAnimConfigOrArrayOrFunc } from 'rc-queue-anim';
import Texty from 'rc-texty';
import TweenOne from 'rc-tween-one';
import './index.scss';

const animConfig: IAnimConfigOrArrayOrFunc = {
  opacity: [1, 0],
  scaleX: [1, 0],
};

const HomeTitle: FC<PropsWithChildren<{}>> = () => {
  return (
    <section className={'text-center py-14 h-[172px]'}>
      <div className="combined-shape">
        <div className="shape-left">
          <TweenOne
            animation={[
              {
                x: 158,
                type: 'from',
                ease: 'easeInOutQuint',
                duration: 500,
              },
              {
                x: -158,
                ease: 'easeInOutQuart',
                duration: 350,
                delay: -150,
              },
            ]}
            className={'sub-left'}
          />
        </div>
        <div className="shape-right">
          <TweenOne
            className={'sub-right'}
            animation={[
              {
                x: -158,
                type: 'from',
                ease: 'easeInOutQuint',
                duration: 500,
              },
              {
                x: 158,
                ease: 'easeInOutQuart',
                duration: 350,
                delay: -150,
              },
            ]}
          />
        </div>
      </div>
      <Texty
        component={'h1'}
        className={'text-3xl font-semibold mb-2 tracking-widest'}
        mode={'random'}
        delay={600}
      >
        绕香书屋
      </Texty>
      <QueueAnim
        animConfig={animConfig}
        duration={1000}
        delay={700}
        ease={'easeInOutExpo'}
      >
        <hr
          key={'hr'}
          className={
            'h-1.5 w-[20%] m-auto bg-white mb-2 rounded-full border-0 outline-0'
          }
        />
      </QueueAnim>
      <Texty
        component={'h2'}
        className={'tracking-wider font-medium'}
        type="swing-rotate"
        delay={1200}
        interval={30}
      >
        一个充满芳香与温馨的书屋
      </Texty>
    </section>
  );
};

export default memo(HomeTitle);
